<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jvm内存监控</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <!--引入jquery-->
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    let xData=[];
    let yData=[];
    let y2Data=[]
    $.ajax({
        url: "/monitor/queryAll",
        type: "GET",
        async: false,
        page:true,
        data:{},
        dataType: "json",
        success: function (resp) {
            if (resp.code === 0) {
                let data=resp.data;
                for (let i=0;i<data.length;i++){
                    if (data[i].unitId == 5){
                        xData.push(data[i].createTime);
                        yData.push(data[i].monitorValue)
                    }else if (data[i].unitId==6){
                        xData.push(data[i].createTime)
                        y2Data.push(data[i].monitorValue)
                    }

                }

            }
        },
        error: function () {
            alert("请求失败");
        }
    });

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'jvm内存监控',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            },
            calculable: true,
        },
        legend: {
            data: ['堆内存','非堆内存']
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name: '堆内存',
                type: 'line',
                data: yData
            },
            {
                name: '非堆内存',
                type: 'line',
                data: y2Data
            }
        ]

    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>